<template>
	<div class="heima">
		<div class="s">
			<div class="head">
				<span>黑马餐厅</span>
				<div class="box"></div>
				<button class="btn1" @click="go">BACK</button>
				<div class="btn2">
					<Icon type="md-search" size="19"/>
				</div>
			</div>
		</div>
		<div class="z">
			<p class="p">更新时间</p>
			<p class="p1">{{time}}</p>
			<div></div>
		</div>
		<div class="li">
			<div class="xiang" v-for="a in shop">
				<div class="left">
					<button @click="shoping(a.id)"><img :src="'/static/img/police.png'" alt=""></button>
				</div>
				<div class="right">
					<div class="one">
						<p>{{a.name}}</p>
						<p>地址：{{a.address}}</p>
						<p>电话：{{a.phone}}</p>
					</div>
					<div class="two">
						<button>
							评论
						</button>
						<button>
							收藏
						</button>
					</div>

				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import axios from 'axios'
	export default {
		name: "Discount",
		data() {
			return {
				shop: [],
				back: '',
				time:Date('Y-m-d H-i-s'),
			}
		},
		async mounted(){
			let year=new Date().getFullYear();
			let month=new Date().getMonth();
			let day=new Date().getDay();
			this.time=year+'.'+month+'.'+day;
			let sp = await this.$axios.post('/reception/Assembly/discount_all').then(r=>r.data)
			this.shop = sp
			console.log(sp)

		},
		methods: {
			go() {
				return this.$router.push('/users/index')
			},
			shoping(id) {
				return this.$router.push( {name:'orderf' ,params:{id:id}} )
			}
		}
	}
</script>
<style lang="less">
	.heima {
		max-width: 1024px;
		max-height: 1366px;
		margin: auto;

		.s {
			width: 100%;
			background-color: white;

			.headrs {
				width: 100%;
				height: 111px;
				background-repeat: no-repeat;
				background-size: 230px;
				background-position: 70%;
			}
		}

		.el {
			margin-left: 5%;
			width: 27%;
			text-align: center;
		}

		.ivu-dropdown-rel {
			margin-top: 10px;
			background-color: #FE7676;
			border-radius: 8px;
		}

		.ivu-btn-primary {
			height: 33px;
			background-color: #FE7676;
			border: #FE7676;
			border-radius: 50%;
		}

		.ivu-input-group-append {
			border: 0px;
		}

		.ivu-input {
			height: 25px;
		}

		.ivu-avatar {
			height: 44px;
			width: 50px;
		}

		.ivu-list-item-meta-avatar {
			margin-left: 16px;
		}

		.ivu-list-item-action > li:after {
			content: none;
		}

		.ivu-list-item-action {
			position: absolute;
			right: 0;
			bottom: 0;
		}

		.li {
			width: 100%;
			height: 562px;

			overflow: auto;

			.xiang {
				height: 115px;
				width: 100%;

				position: relative;

				.left {
					position: absolute;
					left: 2%;
					top: 8%;
					width: 30%;
					height: 92%;
					background-color: white;
					button{
						width: 100%;
						height: 100%;
						border:0px;
						img {
						width: 100%;
						height: 100%;
					}
					}

				}

				.right {
					position: absolute;
					right: 2%;
					top: 8%;
					width: 64%;
					height: 92%;
					background-color: #B0C1D3;
					line-height: 1;
					border: 0px;
					font-weight: bold;
					line-height: 1.5;
					.one {
						width: 100%;
						height: 80%;
						float: left;
						text-align: center;
						p {
							color: white;
							font-size: 15px;
						}
					}

					.two {
						height: 20%;
						width: 100%;
						text-align: center;
						background-color: rgba(0,0,0,0);
						button {
							width: 30%;
							height: 100%;
							background-color: #F37473;
							border: 0px;
							color: white;
							font-weight: bold;
							border-radius: 5px;
							margin-left: 10px;
						}
					}

					.he {
						height: 100%;
					}

					.wei {
						width: 25px;
						height: 25px;
						background-color: white;
						background-repeat: no-repeat;
						background-size: 25px;
						text-align: center;
						border: 0px;
					}

					.wi {
						width: 100%;
						height: 100%;
					}

					.mag {
						position: absolute;
						bottom: 0;
					}
				}
			}
		}

		.ivu-list-items {
			min-height: 100px
		}

		.ivu-list-item {
			padding: 0;
			border: 0px;

			img {
				height: 44px;
				width: 44px;
			}
		}

		.z {
			width: 100%;
			height: 70px;
			position: relative;
			color: #9BB1C8 ;
			div{
				height: 5px;
				width: 100%;
				background-color: #9BB1C8;
				position: absolute;
				bottom: 10px;
			}
			.p{
				position: absolute;
				right: 10px;
				bottom: 45px;
			}
			.p1{
				position: absolute;
				right: 10px;
				bottom: 30px;
			}
		}

		.z > .head {
			padding: 0;
		}

		.head {
			height: 35px;
			color: white;
			width: 100%;
			background: #9BB1C8;
			font-size: 22px;
			text-align: center;
			padding-right: 38px;
			line-height: 1.5;
			position: relative;
		}

		.head > .btn2 {
			height: 25px;
			width: 25px;
			float: right;
			margin-top: 5px;
			text-align: center;
			padding-top: 3px;
			line-height: 0px;
			background-color: white;
			color: #9BB1C8;
			border-radius: 5px;
		}

		.box {
			width: 0;
			height: 0;
			margin-top: 7px;
			float: left;
			border-top: 11px solid transparent;
			border-bottom: 11px solid transparent;
			border-left: 11px solid transparent;
			border-right: 11px solid white;
			/*background-color:#FEFE00 ;*/
		}

		.clear {
			clear: both;
		}

		.btn1 {
			background: white;
			font-size: 10px;
			margin-top: 7px;
			margin-left: -1px;
			color: #9BB1C8;
			height: 22px;
			padding: 0px 5px;
			border: 1px aliceblue solid;
			border-radius: 10%;
			cursor: pointer;
			float: left;
		}
	}

</style>